import React from 'react'
import { NavBar} from "antd-mobile";
import { json, useLocation, useNavigate } from 'react-router-dom';
import style from '../../css/personal/FansClub.module.css'
import { useEffect } from 'react';
import { getLogin,getEdit } from '../../api/index';
import { useState } from 'react';
export default function FansClub() {
    const navigate = useNavigate()
    const {state} = useLocation()
    const back = () => {
        navigate(-1);
      };
    //   所有用户
    const [userdata,setUserdata] = useState([])
      const [userList,setUserList] = useState([])
      const [userid,setUserId] = useState('')
      const [flag,setFlag]=useState({})

    useEffect(()=>{
        getLogin().then(res=>{
            setUserdata(res.data)
            let arr = [];
            state.data.forEach(item => {
                let obj = res.data.find(i=>i.id == item)
                arr.push(obj)
            });
            setUserList(arr)
            setUserId(state.id)
        })
    },[flag])
  return (
    <>
    <NavBar style={{backgroundColor:"#2ED8C4",color:'white'}} onBack={back}>我的粉丝</NavBar>
    <ul className={style.fanUl}>
        {userList.map(item=><li key={item.id}>
            <div className={style.liLeft}>
                <img src={item.userImg} alt="" />
            </div>
            <div className={style.liMiddle}>
                <p>{item.name}</p>
                <span>{item.text}</span>
                <div>{item.fansN}位粉丝</div>
            </div>
            <div className={style.liRight}>
                {JSON.parse(item.fans).length == 0||JSON.parse(item.fans).includes(item => item != userid)?<button className={style.attBtn} 
                onClick={()=>{
                    let arr =JSON.parse(item.fans)
                    arr.push(userid)
                    getEdit({id:item.id,fans:JSON.stringify(arr),fansN:arr.length}).then(res=>{
                        if(res.code==200){
                            setFlag({})
                        }
                    })
                    let obj = userdata.find(i=>i.id == userid)
                    let arr1 = JSON.parse(obj.attention)
                    arr1.push(item.id)
                    getEdit({id:userid,attention:JSON.stringify(arr1),attentionN:arr1.length}).then(res=>{
                        if(res.code==200){
                            setFlag({})
                        }
                    })

                }}>+ 关注</button>:
                <button className={style.attBtnActive} 
                onClick={()=>{
                    let arr =JSON.parse(item.fans)
                    let arr1 = arr.filter(i => i != userid)
                    getEdit({id:item.id,fans:JSON.stringify(arr1),fansN:arr1.length}).then(res=>{
                        if(res.code==200){
                            setFlag({})
                        }
                    })
                    let obj = userdata.find(i=>i.id == userid)
                    let arr2 = JSON.parse(obj.attention)
                    let arr3 = arr2.filter(i => i != item.id)
                    getEdit({id:userid,attention:JSON.stringify(arr3),attentionN:arr3.length}).then(res=>{
                        if(res.code==200){
                            setFlag({})
                        }
                    })
                }}>已关注</button>}
            </div>
        </li>)}
    </ul>
    </>
  )
}
